<template>
  <div>
    <h-box header="优惠券明细记录">
      <el-form :model="filterForm" label-width="8em">
        <el-form-item prop="couponTitle" label="优惠券名称">
          <el-input placeholder="请输入优惠券名称" v-model="filterForm.couponTitle" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item prop="dateRange" label="领券日期">
          <el-date-picker v-model="filterForm.dateRangeSend" type="daterange" align="center" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="dateRange" label="核销日期">
          <el-date-picker v-model="filterForm.dateRangeConsume" type="daterange" align="center" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="couponStatus" label="优惠券状态">
          <el-checkbox-group v-model="filterForm.couponStatus">
            <el-checkbox checked label="不限" name="couponStatus"></el-checkbox>
            <el-checkbox label="已核销" name="couponStatus"></el-checkbox>
            <el-checkbox label="未核销" name="couponStatus"></el-checkbox>
            <!-- <el-checkbox label="未开始" name="couponStatus"></el-checkbox> -->
            <el-checkbox label="已过期" name="couponStatus"></el-checkbox>
            <el-checkbox label="已作废" name="couponStatus"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item prop="consumeStore" label="核销门店">
          <el-select v-model="filterForm.consumeStore" placeholder="请选择核销门店" multiple clearable style="width: 350px">
            <el-option v-for="item in 10" :key="item" :label="'门店' + item" :value="'门店' + item"></el-option>
          </el-select>
          <!-- <el-checkbox-group v-model="filterForm.consumeStore">
            <el-checkbox checked label="不限" name="consumeStore"></el-checkbox>
            <el-checkbox label="门店1" name="consumeStore"></el-checkbox>
            <el-checkbox label="门店2" name="consumeStore"></el-checkbox>
            <el-checkbox label="门店3" name="consumeStore"></el-checkbox>
            <el-checkbox label="门店4" name="consumeStore"></el-checkbox>
            <el-checkbox label="门店5" name="consumeStore"></el-checkbox>
            <el-checkbox label="门店6" name="consumeStore"></el-checkbox>
          </el-checkbox-group> -->
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter" :loading="loading" type="primary">确定</el-button>
          <el-button @click="handleDownload" :loading="loading" icon="el-icon-download">导出数据</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="detail.list" stripe row-class-name="hui-font-number">
        <el-table-column label="优惠券">
          <template slot-scope="scope">
            <div>标题: {{ scope.row.couponTitle }}</div>
            <div>券号: {{ scope.row.couponCode }}</div>
            <div>
              状态:
              <el-tag v-if="scope.row.couponStatus === '已核销'" type="success" size="mini">已核销</el-tag>
              <el-tag v-else-if="scope.row.couponStatus === '已过期'" type="info" size="mini">已过期</el-tag>
              <el-tag v-else-if="scope.row.couponStatus === '未核销'" type="primary" size="mini">未核销</el-tag>
              <!-- <el-tag v-else-if="scope.row.couponStatus === '未开始'" type="info" size="mini">未开始</el-tag> -->
              <el-tag v-else-if="scope.row.couponStatus === '已作废'" type="info" size="mini">已作废</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户">
          <template slot-scope="scope">
            <!-- <div>昵称: {{ scope.row.couponUser }}</div> -->
            <div>卡号: {{ scope.row.couponUserId }}</div>
            <div>手机: {{ scope.row.couponUserMobile | placeholder('无手机号') }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sendTime" label="领券/核销">
          <template slot-scope="scope">
            <div>领券时间: {{ scope.row.sendTime }}</div>
            <div>核销时间: {{ scope.row.consumeTime | placeholder('暂无') }}</div>
            <!--<div>核销方式: {{ scope.row.consumeMode | placeholder('暂无') }}</div>-->
            <div>核销门店: {{ scope.row.consumeStore | placeholder('暂无') }}</div>
          </template>
        </el-table-column>
        <el-table-column label="关联订单">
          <template slot-scope="scope">
            <!-- <div>订单: {{ scope.row.tradeCount }} 笔</div> -->
            <div>单号: {{ scope.row.tradeId | placeholder('无关联订单') }}</div>
            <div>金额: {{ scope.row.tradeFee | currency('￥', 2) }}</div>
          </template>
        </el-table-column>
      </el-table>

      <!--分页，start-->
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="detail.pages" :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next" :total="detail.total" background class="hui-mt-2">
      </el-pagination>
      <!--分页，end-->
    </h-box>

  </div>
</template>

<script>
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          const today = new Date()
          const end = new Date()
          return (
            time.getTime() > end.setTime(today.getTime() - 3600 * 1000 * 24)
          )
        },
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      filterForm: {
        dateRangeSend: [],
        dateRangeConsume: [],
        couponTitle: '',
        couponStatus: [],
        consumeStore: []
      },
      loading: false,
      detail: {
        pages: 0,
        total: 0,
        list: []
      }
    }
  },
  created () {
    this.mockDetail()
  },
  methods: {
    // 翻页事件
    handleCurrentChange () {
      console.log(this.detail.pages)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },
    // 筛选事件
    handleFilter () {
      this.loading = true
      console.log(this.filterForm)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
        this.loading = false
      }, 500)
    },
    // 下载事件
    handleDownload () {
      console.log('下载标签')
    },
    mockDetail () {
      let pages = this.detail.pages
      let total = 28
      let list = []
      let i = 0
      let tmp = [
        {
          couponCode: '123123123',
          couponTitle: '优惠券名称1',
          couponUserId: '1211212',
          couponUser: '用户昵称',
          couponUserMobile: '13262268525',
          sendTime: '2018-01-31 19:25:43',
          consumeTime: '2018-01-31 19:26:43',
          couponStatus: '已核销',
          consumeMode: '秒付核销',
          consumeStore: '核销门店名称1',
          tradeCount: 1,
          tradeId: '123123131313',
          tradeFee: 100
        },
        {
          couponCode: '543543543',
          couponTitle: '优惠券名称2',
          couponUserId: '1211212',
          couponUser: '用户昵称',
          couponUserMobile: '13262268525',
          sendTime: '2018-01-31 19:25:43',
          consumeTime: '',
          couponStatus: '未核销',
          consumeMode: '',
          consumeStore: '',
          tradeCount: 0,
          tradeId: '',
          tradeFee: 0
        },
        {
          couponCode: '543543543',
          couponTitle: '优惠券名称2',
          couponUserId: '1211212',
          couponUser: '用户昵称',
          couponUserMobile: '13262268525',
          sendTime: '2018-01-31 19:25:43',
          consumeTime: '',
          couponStatus: '已过期',
          consumeMode: '',
          consumeStore: '',
          tradeCount: 0,
          tradeId: '',
          tradeFee: 0
        },
        {
          couponCode: '543543543',
          couponTitle: '优惠券名称2',
          couponUserId: '1211212',
          couponUser: '用户昵称',
          couponUserMobile: '13262268525',
          sendTime: '2018-01-31 19:25:43',
          consumeTime: '',
          couponStatus: '已过期',
          consumeMode: '',
          consumeStore: '',
          tradeCount: 0,
          tradeId: '',
          tradeFee: 0
        }
      ]
      for (i in tmp) {
        list.push(tmp[i])
      }
      this.detail.list = list
      this.detail.pages = pages + 1
      this.detail.total = total
    }
  }
}
</script>

<style lang="less">

</style>
